<template>
  <view class="content">
    <view class="g-header">
    </view>
    <view class="innerPre">


      <view class="header1">
        <view class="header1Text">我的余额(元)</view>
        <view class="header1Icon"></view>
      </view>
      <view class="header2">1213.97</view>

    </view>
    <view class="inner">
      <view class="rechargeBody">
        <view class="rHeader">
          <view class="rHeader1">充值余额</view>
          <view class="rHeader2">充值得鲜泉币</view>
          <view class="rHeader3"></view>
        </view>
        <view class="rList">
          <view class="rLi rLiActive">
            <view class="rLi1">1000元</view>
            <view class="rLi2">售价 100元</view>
          </view>
          <view class="rLi">
            <view class="rLi1">1000元</view>
            <view class="rLi2">售价 100元</view>
          </view>
          <view class="rLi rLiLast">
            <view class="rLi1">1000元</view>
            <view class="rLi2">售价 100元</view>
          </view>
          <view class="rLi">
            <view class="rLi1">1000元</view>
            <view class="rLi2">售价 100元</view>
          </view>
        </view>
      </view>

    </view>
    <view class="innerNext">
    </view>
    <view class="pageBtnBottomWrap">
      <view class="pageBtnBottom" @click="rechargeNextGo">充值</view>
    </view>
  </view>
</template>

<script>
import * as util from '@/common/util'
import _ from 'lodash'

export default {
  components: {},
  data(){
    return {
      title: 'Hello',
      list: [],
    }
  },
  onLoad(){
    this.id = this.$Route.query.id
    console.log(`this.id`, this.id)
  },
  onShow(){},
  mounted(){},
  onReady(){},
  methods: {
    rechargeNextGo(){
      util.linkTo(`/pages/index/rechargeNext?price=11111`)
    },
  },
}
</script>
<style lang="scss">
page {
  background-color: #F7F9FB;
}

.innerPre {
  width: 750px;
  background: linear-gradient(180deg, #177FFF 0%, #177FFF 65%, rgba(23, 127, 255, 0.8799999952316284) 76%, #90C0FA 88%, #F7F7F7 98%);
  border-radius: 0px 0px 0px 0px;
}

.inner {
  padding: 32px;
}

.innerNext {

}


.header1 {
  display: flex;
  justify-content: center;
  align-items: center;

  padding: 20px 0;

  .header1Text {
    font-size: 26px;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.7);
    line-height: 36px;
  }
  .header1Icon {

  }
}

.header2 {
  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 64px;
  font-weight: 600;
  color: #FFFFFF;

  padding-bottom: 120px;
}


.rechargeBody {
  background: #FFFFFF;
  border-radius: 16px 16px 16px 16px;
  opacity: 1;
  padding: 24px;
  margin-top: -120px;

  .rHeader {
    display: flex;
    justify-content: center;
    align-items: center;
    .rHeader1 {
      font-size: 32px;
      font-weight: normal;
    }

    .rHeader2 {
      font-size: 24px;
      font-weight: normal;
      color: #8C8C8C;
      line-height: 36px;
      margin-left: auto;
      margin-right: 20px;
    }

    .rHeader3 {
      width: 40px;
      height: 40px;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
    }
  }

  .rList {
    display: flex;
    align-items: center;
    flex-flow: wrap;
    .rLi {
      width: 190px;
      height: 128px;
      background: #F2F8FF;
      border-radius: 8px 8px 8px 8px;
      opacity: 1;

      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: column;


      margin-right: 20px;
      margin-top: 20px;

      &.rLiLast {
        margin-right: 0px;
      }

      &.rLiActive {
        border: 1px solid #177FFF;
      }

      .rLi1 {
        font-size: 28px;
        font-weight: 600;
        color: #177FFF;
        line-height: 39px;
      }
      .rLi2 {
        font-size: 24px;
        font-weight: normal;
        color: #8C8C8C;
        line-height: 34px;
      }
    }

  }


}

</style>
